<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="<c:url value="/css/style.css" />" rel="stylesheet" type="text/css" media="screen" />
<title>食譜</title>

<style type="text/css">
#page1{
 	width:1200px;
 	/*height:1000px;*/
 	background:#FFF0F5;
 	border-radius:45px;
 	-moz-border-radius:45px;
 	-webkit-border-radius:45px;
 	margin: 0 auto;
	padding: 0;
	border-width:rough;
	border-style:dashed;
	border-color:#EA0000;
 	}

 
.content_box{
	width:500px;
	height:300px;
	display: inline-block;
	font-size:12px;
	border: 3px dashed #FF3937;
	padding: 10px;
	margin: 5px 5px 5px 0;
	overflow:hidden;
	font-size:12px;
	line-height: 1.5em;
	letter-spacing: 1pt;
	-webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;	

}
#pic1{
	width:23px;
	height:35px;
	
	}
#search1{
	float:left;
	width:310px;
	height:600px;
	border-radius:20px;
 	-moz-border-radius:20px;
 	-webkit-border-radius:20px;
	margin:30px 0px 0px 10px;
	box-shadow:3px 3px 3px #AAAAAA;
	border-width:rough;
	border-style:dashed;
	border-color:#228B22;
	background-color:#ECF5FF;
}
#search2{
	padding:10px 0px 0px 40px;
}
#search3{
	float:left;
	padding:5px 0px 0px 10px;
}
#search4{
	padding:7px 0px 0px 15px;
	
}
#meant1{
	padding:5px 0px 0px 10px;
	
}
#meant2{
	color: #FF8888;
	padding:5px 0px 0px 10px;
}
#meant3{
	color: #FF8888;
	padding:5px 0px 0px 10px;
}
#season1{
	color:#0000CC;
	padding:5px 0px 0px 10px;
}
#season2{
	color:#0000FF;
	padding:5px 0px 0px 10px;
}
#season3{
	color:#0000FF;
	padding:5px 0px 0px 10px;
}
#vegetable1{
	color:#00B400;
	padding:5px 0px 0px 10px;
}
#vegetable2{
	color:#00D23C;
	padding:5px 0px 0px 10px;
}
#vegetable3{
	color:#00D23C;
	padding:5px 0px 0px 10px;
}
#vegetable4{
	color:#00D23C;
	padding:5px 0px 0px 10px;
}
#desert1{
	padding:5px 0px 0px 10px;
}
#desert2{
	padding:5px 0px 0px 10px;
	color:#FF88C2;
}
#desert3{
	padding:5px 0px 0px 0px;
	color:#FF88C2;
}
#staple1{
	padding:5px 0px 0px 10px;
	color:#E63F00;
}
#staple2{
	padding:5px 0px 0px 5px;
	color:#FF5511;
}
#bean1{
	padding:5px 0px 0px 10px;
	color:#FFCC22;
}
#bean2{
	padding:5px 0px 0px 10px;
	color:#FFBB00;
}
#other1{
	padding:5px 0px 0px 10px;
	color:#EE7700;
}
#other2{
	padding:0px 0px 0px 10px;
	color:#FF8800;
}
#btm{
	margin:10px 0px 10px 110px;
}
#new1{
	width:800px;
	/*height:950px;*/
	border-radius:20px;
 	-moz-border-radius:20px;
 	-webkit-border-radius:20px;
	margin:30px 0px 0px 20px;
	box-shadow:3px 3px 3px #AAAAAA;
	border-width:rough;
	border-style:dashed;
	border-color:#0066CC;
	margin:10px 0px 0px 350px;
	
}
#new2{
	padding:0px 0px 0px 100px;
	border-bottom:3px dashed #0066CC;
	background-color:#66B3FF;
	border-radius:20px;
 	-moz-border-radius:20px;
 	-webkit-border-radius:20px;
}
#new3{
	padding:5px 0px 10px 170px;
}
#tdstyle{
	height:200px;
	width: 180px;
	padding:0px 0px 0px 10px;
	border-width:rough;
	border-style:dotted;
	border-color:#FFAFD6;
	border-radius:20px;
 	-moz-border-radius:20px;
 	-webkit-border-radius:20px;
}
#tdstyle1{
	height:200px;
	width: 210px;
	
	padding:10px 0px 0px 40px;
	border-width:rough;
	border-style:dotted;
	border-color:#97CBFF;
	border-radius:20px;
 	-moz-border-radius:20px;
 	-webkit-border-radius:20px;
}
.blue {  
    color: #d9eef7;  
    border: solid 1px #0076a3;  
    background: #0095cd;  
    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));  
    background: -moz-linear-gradient(top,  #00adee,  #0078a5);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');  
}  
.blue:hover {  
    background: #007ead;  
    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));  
    background: -moz-linear-gradient(top,  #0095cc,  #00678e);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');  
}  
.blue:active {  
    color: #80bed6;  
    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));  
    background: -moz-linear-gradient(top,  #0078a5,  #00adee);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');  
}
.green {  
    color: #e8f0de;  
    border: solid 1px #538312;  
    background: #64991e;  
    background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));  
    background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');  
}  
.green:hover {  
    background: #538018;  
    background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));  
    background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');  
}  
.green:active {  
    color: #a9c08c;  
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));  
    background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');  
}  

</style>
</head>
<body>
<!-- 引入共同的頁首 -->
<c:set var="funcName" value="IND" scope="session"/>
<jsp:include page="/top/top.jsp" />

<!-- 從這裡開始寫 -->
<div id="page1">
<br>
<form action="<c:url value="/recipe/SearchRecipe" />" method="post" >
<div id="search1">
		 	 <div id="search2">
	    	     	 <input id="search6" style="height: 30px; outline:none; " type="text" name="search" autofocus placeholder="請輸入食譜名稱" size="20" maxlength="30" /> 
	    	 	     <input style="height: 34px;border-top-right-radius:5px;
				      border-bottom-right-radius:5px;"class="button green" 
				      name="searchbtn" type="submit" value="查詢食譜" />
		 	 </div>
	    
	     <div>
	     <a href="<c:url value="/recipe/CountryRecipe?countryid=1" />">
<input type="button" class="button blue" value="日式料理">
</a>
<a href="<c:url value="/recipe/CountryRecipe?countryid=2" />">
<input type="button" class="button blue" value="美式料理">
</a>
<a href="<c:url value="/recipe/CountryRecipe?countryid=3" />">
<input type="button" class="button blue" value="中式料理">
</a>
<a href="<c:url value="/recipe/CountryRecipe?countryid=4" />">
<input type="button" class="button blue" value="韓式料理">
</a>
<br>
<a href="<c:url value="/recipe/CountryRecipe?countryid=5" />">
<input type="button" class="button blue" value="義式料理">
</a>
<a href="<c:url value="/recipe/CountryRecipe?countryid=6" />">
<input type="button" class="button blue" value="南洋料理">
</a>
<a href="<c:url value="/recipe/CountryRecipe?countryid=7" />">
<input type="button" class="button blue" value="其他類別">
</a>
	     
	     	<div id="meant1"><b><font style=font-size:0.6cm;color:#FF3333>肉類:</font></b></div>
	     	<div id="meant2">
		     	<b><font style=font-size:0.5cm><input type="checkbox" name="category" value="1">牛肉</font></b>
		     	<b><font style=font-size:0.5cm> <input type="checkbox" name="category" value="2">豬肉</font></b>
			    <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="3">雞肉</font></b>
			</div>
			<div id="meant3">
			    <b><font style=font-size:0.5cm> <input type="checkbox" name="category" value="4">羊肉</font></b>
			    <b><font style=font-size:0.5cm> <input type="checkbox" name="category" value="5">鴨肉</font></b>
			    <b><font style=font-size:0.5cm> <input type="checkbox" name="category" value="6">鵝肉</font></b>
			</div>
	      	</div>
	    
	     <div>
	    	 <div id="season1"><b><font style=font-size:0.6cm>海鮮類:</font></b></div>
	    	  <div id="season2">
		     	<b><font style=font-size:0.5cm> <input type="checkbox" name="category" value="7">魚</font></b>
		     	<b><font style=font-size:0.5cm> <input type="checkbox" name="category" value="8">貝類</font></b>
		     	<b><font style=font-size:0.5cm> <input type="checkbox" name="category" value="9">甲殼類</font></b>
		     	</div>
		     	<div id="season3">
		     	<b><font style=font-size:0.5cm> <input type="checkbox" name="category" value="10">頭族類</font></b>
		     	<b><font style=font-size:0.5cm> <input type="checkbox" name="category" value="11">軟體族類</font></b>
		      </div>
	     </div>
	       
	     <div>
	       <div id="vegetable1"><b><font style=font-size:0.6cm>蔬菜類:</font></b></div>
	      	 <div id="vegetable2">
		      	 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="12">葉菜類</font></b>
		      	 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="13">根莖類</font></b>
		      	 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="14">花菜花瓣類</font></b>
		     </div>
		     <div id="vegetable3">
		    	 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="15">菇蕈類</font></b>
		      	 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="16">海菜類</font></b>
		      	 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="17">種子核果類</font></b>
		      </div>
		      <div id="vegetable4">
		      	 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="18">蒟蒻類</font></b>
		      	 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="19">水果類</font></b>
	      	 </div>
	     </div>
	     
	     <div>
	      <div id="desert1"><b><font style=font-size:0.6cm>甜點:</font></b></div>
	      	<div id="desert2">
	         <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="20">麵包</font></b>
			 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="21">西式點心</font></b>
			 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="22">中式點心</font></b>
			 <div id="desert3">
			 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="23">其他點心</font></b>
			 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="24">飲料</font></b>
			 </div>
			</div>
		</div>
		
		<div> 
	      <div id="staple1">
	         <b><font style=font-size:0.6cm>主食:</font></b>
	     	 <b><font  id="staple2"style=font-size:0.5cm><input type="checkbox" name="category" value="26">米類製品</font></b>
	     	 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="29">麵粉類製品</font></b>
	      </div>
		<div id="bean1">
		 <b><font  style=font-size:0.6cm>豆類:</font></b>
		 <b><font id="bean2" style=font-size:0.5cm><input type="checkbox" name="category" value="25">豆類</font></b>
			<b><font id="other1" style=font-size:0.6cm>其他:</font></b>
			 <b><font id="other2" style=font-size:0.5cm><input type="checkbox" name="category" value="32">其他</font></b>
		</div>
	    </div>
	    <input id="btm" style="height: 34px;border-radius:10px;
 			-moz-border-radius:10px;-webkit-border-radius:10px;
 			"class="button rosy" type="submit" name="searchbtn" value="送出查詢" />
	 </div>
	</form>
<div id="new1">
	    	<div id="new2">
	    		<div id="new3">
	    		<b><font style="font-size:1.2cm;-webkit-text-stroke:2px;-webkit-text-stroke-color:white;-webkit-text-fill-color:#4A4AFF">FOOD RECIPE</font></b>
	    		</div>
	    	</div>
	    	<center>
	    	<% int i=0; %> 
	    	<table style="padding:30px 0px 0px 5px;">
	    	<tr>
	    	<c:forEach varStatus="stVar" var="recipe_show" items="${recipe_show}">
	     	<td id="tdstyle1">
	     	<a href="<c:url value='/recipe/ShowRecipe?rid=${recipe_show.rid}' />">
               	<img style="margin:0px 0px 0px 10px;" height='150' width='150' src='${pageContext.servletContext.contextPath}/getImg?id=${recipe_show.rid}&type=RECIPE'>
               	<br/>
               	<div style="margin:0px 0px 0px 5px;color:#0000FF;"><b style="font-size:0.4cm">${recipe_show.rname}</b>&nbsp&nbsp&nbsp<h4>新增日期:${recipe_show.rdate}</h4><span style="float:center"><img style="width:20px;height:30px;" src="<c:url value="/images/ice.png"/>"/><b>${recipe_show.rscore}</b></span></div>
               	</a>
	  		</td>
	   		 <%  i++; 
                 if(i%3==0){
                	 out.print("</tr><tr>");
                 }
              %>
	    </c:forEach>
	    </tr>
	    </table>
	    </center>
	    </div>

</div>
	<center>
	<div id="div2">
	<%-- 

		<c:if test="${ now != '0'}">

			<a href="<c:url value='${first}'/>">第一頁</a>
			<a href="<c:url value='${pre}'/>">上一頁</a>

		</c:if>
		<c:if test="${empty last}">

			<a href="<c:url value='${next}'/>">下一頁</a>
			<a href="<c:url value='${toEnd}'/>">最末頁</a>

		</c:if>
		
	<br/>
	第${now+1}頁/共${total+1}頁
	</div>
	--%>
	</center>
	<!-- 寫到這裡結束 -->

<div id="footer-wrapper">
	<div id="footer">
		<p>Copyright (c) 2010 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/" rel="nofollow">FCT</a>.</p>
	</div>
</div>
</body>
</html>